<div class="inline-grid-container">
<div style="max-height:800px;overflow:auto;">
<table class="table inline-grid <%= type %>-grid <%= className %> <%= className %>-<%= randomSeed %>">
  <tr>
    <% if type == "questions" || type == "notes" %>
      <th><a data-type="title">Title</a></th>
      <th><a data-type="author">Author</a></th>
      <th><a data-type="updated">Updated</a></th>
      <th><a data-type="likes">Likes</a></th>
      <th><a data-type="comments">Comments</a></th>
    <% elsif type == "activity" || type == "upgrades" %>
      <th><a data-type="title">Purpose</a></th>
      <th><a data-type="category">Category</a></th>
      <th><a data-type="status">Status</a></th>
      <th><a data-type="author">Author</a></th>
      <th><a data-type="time">Time</a></th>
      <th><a data-type="difficulty">Difficulty</a></th>
      <% if type == "activity" %>
        <th><a data-type="replications">Replications</a></th>
      <% else %>
        <th><a data-type="builds">Builds</a></th>
      <% end %>
    <% end %>
  </tr>
<% if nodes.empty? %>
  <tr>
    <td>Nothing yet on the topic "<b><a href="/tag/<%= tagname %>"><%= tagname %></a></b>" -- be the first to <a href="/post?tags=<%= tagname %>" class="requireLogin">post something</a>!</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
<% end %>
<% nodes.each_with_index do |node, index| %>
  <% if index > 9 %>
    <tr class="hide extra">
  <% else %>
    <tr>
  <% end %>
    <% if type == "notes" || type == "questions" %>
      <td class="title">
        <% if node.has_tag("pin:#{tagname}") %><i rel="tooltip" title="This item was pinned with the tag 'pin:<%= tagname %>'." class="fa fa-thumb-tack"></i>
        <% elsif node.has_tag("pin:question:#{tagname}") %><i rel="tooltip" title="This item was pinned with the tag 'pin:question:<%= tagname %>'." class="fa fa-thumb-tack"></i>
        <% end %>
        <a href="<%= node.path %>"><%= node.title %></a>
      </td>
      <td class="author"><a href="/profile/<%= node.author.username %>">@<%= node.author.username %> <%=node.author.new_contributor %></a></td>
      <td class="updated" data-timestamp="<%= node.latest.timestamp.to_s %>"><%= distance_of_time_in_words(Time.at(node.latest.updated_at), Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></td>
      <td class="likes"><%= node.cached_likes.to_s %></td>
      <td><%= node.comments.published.count.to_s %></td>
    <% else %>
      <td class="title">
        <% if node.has_tag("pin:#{tagname}") %><i rel="tooltip" title="This item was pinned with the tag 'pin:<%= tagname %>'." class="fa fa-thumb-tack"></i>
        <% elsif node.has_tag("pin:activity:#{tagname}") %><i rel="tooltip" title="This item was pinned with the tag 'pin:activity:<%= tagname %>'." class="fa fa-thumb-tack"></i>
        <% end %>
        <a href="<%= node.path %>"><%= node.latest.title %></a>
      </td>
      <td class="category"><%= node.has_power_tag('category') ? node.power_tag('category') : '-' %></td>
      <td class="status"><%= node.has_power_tag('status') ? node.power_tag('status') : '-' %></td>
      <td class="author"><a href="/profile/<%= node.author.username %>">@<%= node.author.username %> <%=node.author.new_contributor %></a></td>
      <td class="time"><%= node.has_power_tag('time') ? node.power_tag('time') : '-' %></td>
      <td class="difficulty"><%= node.has_power_tag('difficulty') ? node.power_tag('difficulty') : '-' %></td>
      <% if type == "activity" %>
        <td class="replications"><%= node.response_count('replication') %> replications: <a href="<%=  node.path %>#replications">Try it &raquo;</a></td>
      <% else %>
        <td class="builds"><%= node.response_count('build') %> builds: <a href="<%=  node.path %>#builds">Try it &raquo;</a></td>
      <% end %>
    <% end %>
  </tr>
<% end %>
</table>
</div>

<%= render partial: 'grids/embedButton' , locals: {className: className, randomSeed: randomSeed, type: type, tagname: tagname, thumbnails: false} %>

<% if type == "questions" || tagname.include?('question:') %>
  <div>
    <a href='/post?tags=question:<%= tagname %>,<%= tagname %>&template=question&title=How%20do%20I...&redirect=question' class='btn btn-primary add-activity requireLogin'>Ask a question</a> &nbsp;or <a class="requireLogin" href='/subscribe/tag/question:<%= tagname %>'>help answer future questions<span class='d-none d-lg-inline'> on this topic</span></a>
  </div>
<% elsif type == "activity" || tagname.include?('activity:') %>
  <div>
    <a href='/post?tags=activity:<%= tagname %>,<%= tagname %>,seeks:replications&title=How%20to%20do%20X' class='btn btn-primary add-activity requireLogin'>Add an activity</a> &nbsp;or <a href='/post?tags=<%= tagname %>,question:<%= tagname %>,request:activity&template=question&title=How%20do%20I...&redirect=question' class='request-activity requireLogin'>request an activity<span class='d-none d-lg-inline'> guide you don't see listed</span></a>
  </div>
  <p><i>Activities should include a materials list, costs and a step-by-step guide to construction with photos. Learn what <a href="https://publiclab.org/notes/warren/09-17-2016/what-makes-a-good-activity">makes a good activity here</a>.</i>
  </p>
<% end %>
  
<script>
(function(){
  //setupGridSorters(".<%= className %>-<%= randomSeed %>"); Should order the items by time. Commented out because it reorders the items each time show more/less is clicked
})()
</script>

<style>
  th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}
</style>
</div>
